<template>
    <div>
        <van-index-bar :index-list="computedList" @select="handleSelect">
            <div v-for="item in cityList" :key="item.list.cityId">
                <van-index-anchor :index="item.type" >{{ item.type }}</van-index-anchor>
                <van-cell :title="data.name" v-for="data in item.list" :key="data.cityId" @click="handleClick(data)"  />
            </div>
        </van-index-bar>

    </div>
</template>
<script>
import isShow from "@/util/IsShowNavBar";
import { createApp } from 'vue';
import { IndexBar, IndexAnchor,showToast } from 'vant';
import http from '@/util/http';

const app = createApp();
app.use(IndexBar);
app.use(IndexAnchor);

export default {
    mixins:[isShow],
    data(){
        return {
            indexList:[],
            cityList:[],
        }
    },
    computed:{
        computedList(){
            return this.cityList.map(item => item.type)
        }
    },
    created(){
        //创建a - z 的26个字母列表
        for ( var i = 65; i <91 ; i++){
            this.indexList.push(String.fromCharCode(i))
        }
        http({
            url: '/gateway?k=1376350',
            headers: {
                'X-Host': 'mall.film-ticket.city.list'
            }
        }).then(res => {
            // console.log(res.data.data.cities[0].pinyin)
            this.cityList = this.indexList.map(item =>  { //将字母列表映射成所需格式
                const aaa = new RegExp(`^${item}`,'gi')
                return {
                    type: item,
                    list: res.data.data.cities.filter(data => aaa.test(data.pinyin)) //过滤出26组 不同数据
                }
            }).filter(item => item.list.length >0) // 过滤出没有数据的项
            // console.log(this.cityList)
        })
       
    },
    methods: {
        handleClick(data){
            this.$store.state.cinemaList = []
            this.$store.commit('changeCityId',data.cityId)
            this.$store.commit('changeCityName',data.name)
            this.$router.push({
                path: '/Cinemas'
            })
        },
        handleSelect(data){
            // console.log(data)
            showToast({
                message: data,
                position: 'bottom'
            })
        },
    },
}
</script>
<style lang="scss">
.van-toast--text, .van-toast--html{
    min-width: 30px;
}
</style>